import React from 'react';
import { BookOpen, Settings } from 'lucide-react';

interface LayoutProps {
  children: React.ReactNode;
  sidebarContent?: React.ReactNode;
  onSettingsClick: () => void;
  onHomeClick: () => void;
}

export const Layout: React.FC<LayoutProps> = ({
  children,
  sidebarContent,
  onSettingsClick,
  onHomeClick
}) => (
  <div className="flex h-screen bg-slate-50">
    {/* Sidebar */}
    <aside className="w-72 bg-white border-r border-slate-200 flex flex-col shrink-0 z-20">
      <div
        className="p-6 flex items-center gap-3 border-b border-slate-100 cursor-pointer hover:bg-slate-50 transition-colors"
        onClick={onHomeClick}
      >
        <div className="bg-primary/10 p-2 rounded-lg text-primary">
          <BookOpen className="w-6 h-6" />
        </div>
        <h1 className="text-xl font-bold text-slate-800 tracking-tight">来刷题吧 !</h1>
      </div>

      <div className="flex-1 overflow-y-auto p-4 scrollbar-hide">
        {sidebarContent}
      </div>

      <div className="p-4 border-t border-slate-100">
        <button
          onClick={onSettingsClick}
          className="w-full flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 rounded-lg transition-colors"
        >
          <Settings className="w-5 h-5" />
          <span className="font-medium">系统设置</span>
        </button>
      </div>
    </aside>

    {/* Main Content */}
    <main className="flex-1 overflow-hidden relative flex flex-col">
      {children}
    </main>
  </div>
);